<template>
	<view class="page" :style="{ height: windowHeight + 'px' }">
		<view :style="'top:'+statusBarHeight+'px'+';'+'width:'+ statusWidth+'px'" class="video_header">
			<view @click="backReturn" class="video_header_backBox">
				<image class="video_header_back" src="/static/home/back_White.png" mode="widthFix"></image>
			</view>
			<view class="video_header_right">
				<view class="video_header_right_detele">
					<!-- <image class="video_header_right_detele_img" src="/static/img/index/videoDelete.png"
						mode="widthFix">
					</image> -->
				</view>
				<view class="video_header_right_share">
					<!-- <image class="video_header_right_share_img" src="/static/img/index/shareHeader.png" mode=""></image> -->
				</view>

			</view>
		</view>
		<!-- <QS-Navbar @click="navbarClick" :diffMenuButtonInfo="isVideoView_changeIndex" :navbarItems="navbarItems"
			:hasPlacherholder="false" backgroundColor="rgba(255,255,255,0)"></QS-Navbar> -->
		<!-- <swiper :vertical="true" :current="rootSwiperAnimationfinishIndex" class="pages-swiper"
			@change="rootSwiperChange" @animationfinish="rootSwiperAnimationfinish"> -->
		<!-- <swiper-item class="swiper-item">
				<view class="flex_column">
					<QS-Navbar ref="navbar" :navbarItems="[{ width: 1 }]" :fixed="false" :hasPlacherholder="true"
						backgroundColor="rgba(255,255,255,0)"></QS-Navbar>
				</view>
			</swiper-item> -->
		<!-- <swiper-item class="swiper-item"> -->
		<view class="swiper-item bgc-000" style="">
			<list class="pages-swiper" @loadmore="getData()" :loadmoreoffset="windowHeight*3" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true">
				<cell v-for="(item,i) in dataList" :key="i">
					<div ref="item" class="item" :style="boxStyle">
						<jVideo :muted="false" @timeupdate="timeupdate" v-if="Math.abs(k-i)<=1" :state="item.state"
							:src="item.src" :boxStyle="boxStyle">
						</jVideo>
						<view class="videoHover" v-if="1" @tap="tapVideoHover(item.state,$event)" :style="boxStyle">
							<image v-if="item.state=='pause'" class="playState" src="/static/img/index/play.png">
							</image>
						</view>
						<view :style="{width:statusWidth+'px'}" class="userInfo" @appear="k=i">
							<view class="userInfo_top">
								<image class="userAvatar" :src='item.infoImg'>
								</image>
								<text class="userInfo_top_name">{{item.title}}</text>
							</view>
							<scroll-view scroll-y="true" style="height: 120upx;">
								<view class="userInfo_content">
									<text class="userInfo_content_text">{{item.msg}}</text>
								</view>
							</scroll-view>


							<view @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart"
								:style="';position: absolute; bottom: '+ (ProgressBarBottom + 80 - 20) +'upx; left: 0;'">
								<!-- 1.这一步必须加，为了适配低端机型 -->
								<text :style="'width: '+ windowWidth +'px; opacity: 0;'">.</text>
								<!-- 2.这是未加载的时的右边的灰色部分 -->
								<view
									:style="'width: '+ windowWidth +'px; height: 4upx; background-color: #C8C7CC; position: absolute; bottom: '+ ProgressBarBottom +'upx; opacity: '+ ProgressBarOpacity +';'">
								</view>
								<!-- 3.这里我采用的分离式办法：就是让滑动样式和不滑动的样式分开，这样相互不干扰，可以避免进度条闪动的问题 -->
								<!-- 4.注意：isShowProgressBarTime 加入了返回数据中 -->
								<view v-if="dataList[i].isShowProgressBarTime == false"
									:style="'transition: all 0.5s ease-out;transform:translateX(-1px);width: '+ (currentPosition + 1) +'px;border-radius: 8px ; height: 8upx;background-color: #FFFFFF; position: absolute; bottom: '+ (ProgressBarBottom - 2)  +'upx; left: 0; opacity: 1;'">
								</view>
								<view v-if="dataList[i].isShowProgressBarTime == true"
									:style="'width: '+ (currentPositions) +'px; transition: all 0.5s ease-out;height: 8upx; background-color: #FFFFFF; position: absolute; bottom: '+ ProgressBarBottom +'upx; left: 0; opacity: '+ (ProgressBarOpacity + 0.05) +';'">
								</view>
								<!-- <view v-if="dataList[0].isShowProgressBarTime == false"
									:style="'width: 4px; height: 4px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 2) +'upx; left: '+ (currentPosition) +'px; opacity: '+ ProgressBarOpacity +';'">
								</view> -->
								<view v-if="dataList[i].isShowProgressBarTime == true"
									:style="'width: '+ dotWidth +'px; height: '+ dotWidth +'px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 5) +'upx; left: '+ (currentPositions - 5) +'px; opacity: '+ ProgressBarOpacity +';'">
								</view>
							</view>

							<view class="userInfo_bottom">
								<view class="userInfo_bottom_list" @tap="cLike(item.hitState , item);">
									<view style="margin-top: -20upx;">
										<image style="width:54upx;" class="userInfo_bottom_list_img"
											v-if="item.hitState == 1" src="/static/img/index/like_active.png"
											mode="widthFix" />
										<image style="width:54upx;" class="userInfo_bottom_list_img"
											v-if="item.hitState == 0" src="/static/img/index/like.png"
											mode="widthFix" />
									</view>
									<text class="userInfo_bottom_list_text">{{item.circlePraseCount}}</text>
								</view>
								<view @tap="toComment(i)" class="userInfo_bottom_list">
									<view style="margin-top: 10upx;">
										<image style="width:52upx;" class="userInfo_bottom_list_img"
											src="/static/img/index/commentNew.png" mode="widthFix" />
									</view>
									<text class="userInfo_bottom_list_text"
										style="color: #FFFFFF;margin-right: 40upx;">{{item.circleComentNumber}}</text>
								</view>
							</view>
							<!-- 
							<view class="like" @tap="cLike(item.video_id,item.like);item.like=!item.like">
								<image v-if="item.like" class="likeIco" src="/static/img/index/xinActive.png" />
								<image v-else class="likeIco" src="/static/img/index/xin.png" />
								<text class="likeNum" :class="{'likeNumActive':item.like}">{{item.like_n}}</text>
							</view>
							<view class="comment" @tap="toComment(i)">
								<image class="commentIco" src="/static/img/index/comment.png"></image>
								<text class="t-a-c" style="color: #FFFFFF;">{{Math.abs(k-i)}}</text>
							</view> -->
						</view>
						<!-- <view class="content">
							<text class="userName">@{{item.title}}-{{i}}</text>
							<text class="words">{{item.msg}}</text>
						</view> -->
					</div>
				</cell>
			</list>
		</view>
		<!-- </swiper-item> -->
		<!-- </swiper> -->
		<comment v-if="dataList.length" :nullData="nullData" :scrolltype="scrolltype" ref="comment"
			:getSumCountlength="dataList[k].circleComentNumber||0" :idFn='fileid' :list="commentlistList"
			@fatherMethod="commentlists"></comment>
	</view>
</template>

<script>
	import {
		file,
	} from '@/api/community'
	import {
		commentlist,
		addcomment,
		delcomment,
		zan,
		nzan,
		filezan,
		filenzan,
		bootcircleselectnext
	} from '@/api/minefile'
	import jVideo from './j-video.nvue';
	var commentId = 0;
	export default {
		components: {
			jVideo,
		},
		data() {
			return {
				pinglunShow: true,
				nullData: false,
				fileid: '',
				pageSize: 10,
				pageNum: 1,
				videomsg: {
					hitState: 0,
				},
				testarr: [],

				videotitle: '',
				videomain: '',
				commentlist: [],
				commentlistList: [],
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
				ready: false, //可忽略
				isDragging: false, //false代表停止滑动🌟💗
				refreshing: true, //用于下拉刷新🌟💗
				windowWidth: 0, //获取屏幕宽度🌟💗
				dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
				currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
				platform: '', //用于获取操作系统：ios、android🌟💗
				playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
				videoTime: '', //视频总时长，这个主要用来截取时间数值💗
				videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
				changeTime: '', //显示滑动进度条时变化的时间💗
				isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
				currenttimes: 0, //当前时间💗
				isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
				ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
				dotWidth: 0, //播放的小圆点，默认没有💗
				deleteHeight: 0, //测试高度🌟💗
				percent: 0, //百分小数💗
				currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
				currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
				newTime: 0, //跟手滑动后的最新时间💗
				timeNumber: 0, //🌟💗
				ProgressBarBottom: 20, //进度条离底部的距离💗
				statusWidth: '',
				statusBarHeight: '',
				rootSwiperChangeIndex: 1,
				ProgressBarBottom: 20,
				videoTime: '',
				rootSwiperAnimationfinishIndex: 1,
				windowHeight: uni._systemInfo.screenHeight,
				dataList: [],
				clik: false,
				boxStyle: `height: 0;width: 750rpx`,
				scrollTop: 0,
				oldScrollTop: 0,
				percent: 0, //百分小数💗
				k: 0,
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题
				ready: false,
				//isDragging:false//用户是否正在拖动列表
				navbarHeight: uni._navbarHeight,
				currentPosition: 0,
				pageShow: false,
				sendData: {
					current: 1,
					size: 10
				},
				scrolltype: false
				// commentGetDataFn: function() {
				// 	return new Promise(rs => {
				// 		rs({
				// 			"pages": 1,
				// 			"records": [{
				// 				"childList": [],
				// 				"content": "11111",
				// 				"id": 2,
				// 				"likeCounts": 0,
				// 				"name": "我",
				// 				"time": "Wed Dec 29 2021",
				// 				"isLike": false
				// 			}]
				// 		})
				// 	})
				// },
			}
		},
		computed: {
			isVideoView() {
				return this.rootSwiperAnimationfinishIndex == 1;
			},
			isVideoView_changeIndex() {
				return this.rootSwiperChangeIndex == 1;
			},
			navbarItems() {
				const t = this.isVideoView_changeIndex;
				const arr = [{
						type: 'image',
						src: '/static/logo.png',
						// stringWidth: '30px',
						width: 15,
						itemWidth: '22px',
						itemHeight: '22px',
						layout: 'left',
						opacity: t ? 1 : 0
					},
					{
						change: true,
						changeIndex: 0,
						type: 'text',
						text: 'tab1',
						flex: 1,
						// width: 30,
						fontSize: '18px',
						textAlign: 'right',
						layout: 'right',
						color: t ? '#ffffff' : '#000000',
						opacity: t ? .4 : 1,
					},
					{
						stringWidth: '24px',
						// width: 10
					},
					{
						change: true,
						changeIndex: 1,
						type: 'text',
						text: 'tab2',
						flex: 1,
						// width: 30,
						fontSize: '18px',
						textAlign: 'left',
						layout: 'left',
						color: t ? '#ffffff' : '#666666',
						opacity: t ? 1 : .4
					},
					{
						type: 'image',
						id: 'search',
						src: '/static/logo.png',
						// stringWidth: '30px',
						width: 15,
						itemWidth: '22px',
						itemHeight: '22px',
						layout: 'right',
						opacity: t ? 1 : 0
					}
				]
				return arr;
			}
		},
		created() {
			this.files();
			// console.log(this.videomsg.hitState)
		},
		onLoad(data) {
			this.fileid = data.id;
		},
		onShow() {
			this.pageShow = true;
			if (this.isVideoView) {
				const item = this.dataList?. [this.k];
				if (item) item.state = 'play';
			}
			this.setTabbarStyle();
		},
		onHide() {
			this.pageShow = false;
			const item = this.dataList?. [this.k];
			if (item) item.state = 'stop';
		},
		watch: {
			k(k, old_k) {
				this.dataList[k].state = 'play'
				this.dataList[old_k].state = 'stop'
				this.pageNum = 1;
				this.commentlistList = [];
				this.nullData = false;
				this.scrolltype = false;
				this.pinglunShow = false
				setTimeout(() => {
					this.pinglunShow = true
				}, 0)
				this.$forceUpdate()
			},
			rootSwiperChangeIndex() {
				this.setTabbarStyle();
			},
		},
		mounted() {
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			let _t = this;
			setTimeout(() => { //获取状态栏高度，setTimeout后才能调用uni.    
				uni.getSystemInfo({
					success: function(res) {
						_t.statusBarHeight = res.statusBarHeight;
						_t.statusWidth = res.windowWidth;
					}
				});
			}, 1);
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.boxStyle = `height: ${this.windowHeight}px;width: 750rpx`
			// this.getData(false, false, e => {
			// 	//this.$refs.video[0].play();
			// 	if (this.isVideoView && this.pageShow) this.dataList[this.k].state = 'play';
			// 	this.ready = true;
			// });
			// this.getNavbarHeight();
		},
		methods: {
			files() {
				let sss = {
					id: this.fileid
				}
				bootcircleselectnext(sss).then(res => {
					console.log(res)
					if (res.success == 1) {
						this.videomsg = res.data;
						this.getData(false, false, e => {
							//this.$refs.video[0].play();
							if (this.isVideoView && this.pageShow) this.dataList[this.k].state = 'play';
							this.ready = true;
						});
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			commentlists() {
				if (this.scrolltype || this.nullData) return
				let sss = {
					circleId: this.fileid,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				this.scrolltype = true
				commentlist(sss).then(res => {
					console.log(res)
					if (res.success == 1) {
						// this.commentlist = res.data.records;
						// this.commentlist = [];
						// console.log(res.data.records.length)

						for (let obj in res.data.records) {
							// console.log(obj)
							this.commentlistList.push(res.data.records[obj])
						}
						// console.log(this.commentlistList.length ,this.pageNum )
						this.$nextTick(function() {
							this.$forceUpdate();
						})
						if (res.data.records.length < 10) {
							this.nullData = true
							return
						}
						this.pageNum++;
					} else {
						this.pageNum--;
						uni.showToast({
							title: '无更多数据',
							icon: 'none',
							duration: 2000
						});
					}
				}).finally(() => {
					this.scrolltype = false
				})
			},
			commentGetDataFn: function() {
				return new Promise(rs => {
					let arr = []
					for (let sss in this.commentlist) {
						let likes = false;
						if (this.commentlist[sss].commentHitState == 1) {

							likes = true;
						}
						// console.log(likes,this.commentlist[sss].commentPraseCount,"显示是否点赞",sss)
						let lists = {
							"content": this.commentlist[sss].commentContent,
							"name": this.commentlist[sss].nickName,
							"likeCounts": this.commentlist[sss].commentPraseCount,
							"imageUrl": this.commentlist[sss].imageUrl,
							"id": this.commentlist[sss].id,
							"isLike": likes,
						}
						arr.push(lists)
					}
					rs({
						"pages": this.pageNum,
						"records": arr
					})
				})
			},

			getNavbarHeight() {
				this.$refs.navbar.getQuery(data => {
					this.navbarHeight = data.height;
				})
			},
			setTabbarStyle() {
				let type = 'light';
				const t = this.isVideoView_changeIndex;
				if (t) {
					type = 'black';
				} else {
					type = 'light'
				}
				uni.$setTabBarStyle(type);
			},
			navbarClick(item, index) {
				if (item.change) {
					this.rootSwiperChangeIndex = item.changeIndex;
					this.rootSwiperAnimationfinishIndex = item.changeIndex;
				}
				if (item.id == 'search') {
					uni.$qs.navigateTo('common.search');
				}
			},
			timeupdate(event, index) {
				let timeNumber = Math.round(event.detail.duration)
				var currenttime = event.detail.currentTime
				this.videoTime = this.formatSeconds(timeNumber);
				this.percent = currenttime / timeNumber
				this.currentPosition = this.windowWidth * this.percent
			},
			formatSeconds(value) { //获取时间函数
				let theTime = parseInt(value); // 秒
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
			},
			rootSwiperAnimationfinish(e) {
				this.rootSwiperAnimationfinishIndex = e.detail.current || this.rootSwiperChangeIndex;
				if (this.rootSwiperAnimationfinishIndex != 1) {
					if (!this.homeInit) {
						this.homeInit = true;
						// this.$refs.home.init();
					}
					this.dataList[this.k].state = 'stop';
				} else {
					this.dataList[this.k].state = 'play';
				}
			},
			rootSwiperChange(e) {
				this.rootSwiperChangeIndex = e.detail.current;
			},

			// 小程序
			videoSwiperAnimationfinish(e) {
				this.k = e.detail.current;
			},

			touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
				this.currentPositions = event.changedTouches[0].screenX
				this.percent = this.currentPositions / this.windowWidth
				this.newTime = this.percent * timeNumber
				this.currenttimes = parseInt(this.newTime)
				let theTime = this.newTime
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				this.changeTime =
					`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
			},
			touchend() { //当手松开后，跳到最新时间
				uni.createVideoContext('myVideoTow', this).seek(this.newTime)
				if (this.dataList[this.k].state == 'pause') {
					this.dataList[this.k].state = 'play'
					uni.createVideoContext('myVideoTow', this).play()
				}
				this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
				this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
				this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
				this.dotWidth = 0 //隐藏起来进度条，不那么明显了
			},
			touchstart(event) {
				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
				this.dotWidth = 10 //让点显示起来更明显一点
			},
			// 视频操作
			getData(refresh = false, doEvent = false, callback = e => {}) {
				// uni.$qs.doPageDemand.call(this, {
				// 	//getDataFn: 请求视频列表接口,

				if (this.dataList.length != 0) {
					return
				}

				// 	refresh,
				// 	doEvent,
				// 	setName: 'dataList',
				// 	successEnd: ()=>{
				// 		callback();
				// 	}
				// })
				// console.log(this.videomsg)
				// for (let i = 0; i < 1; i++) {
				// for (var i = 0; i < this.videomsgcircleList.length; i++) {
				// 	let elem = this.videomsgcircleList[i]
				// 	this.
				// }
				this.videomsg.circleList.unshift(this.videomsg.circle);
				this.videomsg.circleList.forEach((item, i) => {
					this.dataList.push({
						infoImg: item.imageUrl,
						title: item.title,
						msg: item.description,
						state: 'pause',
						like: i % 2 > 0,
						like_n: i,
						id: item.id,
						"playIng": false, //13.播放（默认这个即可）
						"isShowimage": false, //14.是否显示封面（默认这个即可）
						"isShowProgressBarTime": false, //15.是否显示进度条（默认这个即可）
						"isplay": true, //16.是否播放音频（默认这个即可）
						// src: 'https://cloud.video.taobao.com//play/u/1768198696/p/1/e/6/t/1/239439242603.mp4',
						src: item.videoUrl,
						circlePraseCount: item.circlePraseCount,
						circleComentNumber: item.circleComentNumber,
						hitState: item.hitState,
						videoImg: ''
					});
				})
				// }
				setTimeout(e => { //模拟接口请求时间为1秒
					callback();
				}, 1000);
			},
			//点击播放&&暂停
			tapVideoHover(state, event) {
				const item = this.dataList[this.k];
				// #ifdef APP-NVUE
				if (state == 'play' || state == 'continue') {
					item.state = 'pause';
				} else {
					item.state = 'continue';
				}
				// #endif
				// #ifndef APP-NVUE
				const s = item.state;
				if (s == 'play' || s == 'continue') {
					item.state = 'pause';
				} else {
					item.state = 'continue';
				}
				// #endif
			},
			toComment() {
				this.fileid = this.dataList[this.k].id;
				this.commentlists();
				this.$refs.comment.show(this.dataList[this.k].id);
			},
			share() {
				uni.showToast({
					title: '分享功能，敬请期待',
					icon: 'none'
				})
			},
			cLike(sss, item) {
				if (this.clik) return

				if (sss == 1) {
					// 	//视频取消赞
					let sss = {
						// circleId: this.idFn,
						circleId: item.id,
					}
					// console.log(item.id)
					this.clik = true;
					filenzan(sss).then(res => {
						console.log(res)
						if (res.success == 1) {
							// uni.showToast({
							// 	title: '取消成功',
							// 	icon:'success',
							// 	duration: 2000
							// });

							this.dataList[this.k].hitState = 0
							this.dataList[this.k].circlePraseCount--;
							LickChange.changeLike()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						}
					}).finally(err => {
						this.clik = false;
					})
				} else {
					// console.log(video_id)
					// 视频点赞
					let sss = {
						circleId: item.id,
					}
					this.clik = true;
					filezan(sss).then(res => {
						console.log(res);
						if (res.success == 1) {
							this.dataList[this.k].circlePraseCount++;
							this.dataList[this.k].hitState = 1;
							// uni.showToast({
							// 	title: '点赞成功',
							// 	icon:'success',
							// 	duration: 2000
							// });
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(res => {
						console.log(res)
					}).finally(err => {
						this.clik = false;
					})

				}

				const video = this.dataList[this.k];
				sss ? video.like_n -= 1 : video.like_n += 1;
			},
			backReturn() {
				uni.navigateBack({});
			},
		}
	}
</script>

<style scoped lang="scss">
	.pages-swiper {
		// #ifdef APP-NVUE
		flex: 1;
		// #endif
		// #ifndef APP-NVUE
		height: 100vh;
		width: 750rpx;
		// #endif

	}

	.swiper-item {
		// #ifdef APP-NVUE
		flex: 1;
		// #endif
		// #ifndef APP-NVUE
		height: 100vh;
		width: 750rpx;
		// #endif
	}


	.item {
		width: 750upx;
		background-color: #000000;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;

		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 80upx;
		height: 80upx;
	}

	.userInfo {
		// position: absolute;
		// bottom: 250upx;
		// right: 15px;
		// justify-content: center;
		// align-items: center;
		// flex-direction: column;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.userAvatar {
		border-radius: 500%;
		// margin-bottom: 15px;
		// border-style: solid;
		// border-width: 2px;
		// border-color: #ffffff;
	}

	.userInfo_top {
		padding-left: 32upx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
	}

	.userInfo_content {
		margin-top: 30upx;
		padding-left: 32upx;
	}

	.userInfo_content_text {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.7);
		// line-height: 40upx;
	}


	.userInfo_bottom {
		margin-top: 38upx;
		display: flex;
		justify-content: flex-end;
		flex-direction: row;
		margin-bottom: 20upx;
	}

	.userInfo_bottom_list {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-left: 38upx;
		padding-top: 20upx;
	}

	.userInfo_bottom_list_text {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 12upx;
	}


	.userInfo_top_name {
		margin-left: 24upx;

		font-size: 34upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.7);
		line-height: 48upx;
	}

	.userAvatar {
		width: 68upx;
		height: 68upx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60upx;
		height: 60upx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30upx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 720upx;
		z-index: 99;
		position: absolute;
		bottom: 10px;
		justify-content: center;
		padding: 15upx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
	}

	.userName {
		font-size: 30upx;
		color: #ffffff;
	}

	.words {
		margin-top: 10upx;
		font-size: 30upx;
		color: #ffffff;
	}


	@import '@/mypUI/base.scss';
	@import "@/static/css/index-px.scss";

	// #ifndef APP-NVUE
	page {
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #F5F5F5;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video,
	picker-view,
	picker-view-column {
		box-sizing: border-box;
	}

	image {
		display: block;
	}

	// #endif

	.page {
		// #ifdef APP-NVUE
		// flex: 1;
		// #endif
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #F5F5F5;
	}

	.page-ffffff {
		// #ifdef APP-NVUE
		// flex: 1;
		// #endif
		// #ifndef APP-NVUE
		min-height: 100vh;
		// #endif
		background-color: #FFFFFF;
	}

	/*每个页面公共css */

	.d-b {
		// #ifndef APP-NVUE
		display: block;
		// #endif
	}

	// white-space w-s
	.w-s-n {
		// #ifndef APP-NVUE
		white-space: nowrap;
		// #endif
	}

	// input
	.input-row {
		height: 24.5px;
		border-bottom: 1px solid #E5E5E5;
	}

	// font-family f-f
	.f-f-Arial {
		font-family: Arial;
	}

	// font-style f-st
	.f-st-italic {
		font-style: italic;
	}

	// width w
	.w-750rpx {
		width: 750rpx;
	}

	.w-flex {
		// #ifndef APP-NVUE
		width: 0;
		// #endif
	}

	// height h
	.h-flex {
		// #ifndef APP-NVUE
		height: 0;
		// #endif
	}

	// position ps
	.ps-r {
		position: relative;
	}

	.ps-a {
		position: absolute;
	}

	.ps-f {
		position: fixed;
	}

	.ps-s {
		position: sticky;
	}

	.text-bottom {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: flex-end;
	}

	.search-box {
		border-radius: 100px;
		border: 1px solid #EEEEEE;
		height: 29px;
	}

	.full {
		// #ifdef APP-NVUE
		flex: 1;
		// #endif
		// #ifndef APP-NVUE
		height: 100%;
		width: 100%;
		// #endif
	}

	.t-of-e-1 {
		text-overflow: ellipsis;
		overflow: hidden;
		// #ifdef APP-NVUE
		lines: 1;
		// #endif
		// #ifndef APP-NVUE
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		// #endif
	}

	.checkbox {
		transform: scale(.7);
	}

	.line-solid {
		flex: 1;
		height: 0;
		border-top-width: 1px;
		border-top-style: solid;
		border-color: #E5E5E5;
	}

	.mini-checkbox {
		height: 12px;
		width: 12px;
		border-radius: 50%;
		border-width: 4px;
		border-style: solid;
		border-color: #999999;
	}

	// .mini-checkbox .select {
	// 	border-color: #61B665;
	// }

	// text-align a-t
	.t-a-r {
		text-align: right;
	}

	.t-a-l {
		text-align: left;
	}

	.t-a-c {
		text-align: center;
	}

	// font-weight f-w
	.f-w-bold {
		font-weight: bold;
	}

	.f-w-500 {
		font-weight: 500;
	}

	// fixed-bottom f-b
	.fixed-bottom,
	.f-b {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
	}

	// border b
	.b-2_5px-s-ffffff {
		border: 2.5px solid #FFFFFF;
	}

	// border-bottom b-b
	.b-b-1px-solide-e5e5e5 {
		border-bottom: 1px solid #E5E5E5;
	}

	// border b
	.b-1px-solide-e5e5e5 {
		border: 1px solid #E5E5E5;
	}

	// border-color b-c
	.b-c-e5e5e5 {
		border-color: #E5E5E5;
	}

	// color c
	.c-333333,
	.c-333 {
		color: #333333;
	}

	.c-666666,
	.c-666 {
		color: #666666;
	}

	.c-888888,
	.c-888 {
		color: #888888;
	}

	.c-999999,
	.c-999 {
		color: #999999;
	}

	.c-007aff {
		color: #007AFF;
	}

	.c-ffffff,
	.c-fff {
		color: #FFFFFF;
	}

	.c-d40000 {
		color: #D40000;
	}

	.c-000000,
	.c-000 {
		color: #000000;
	}

	.c-ff6b00 {
		color: #FF6B00;
	}

	.c-15BE50 {
		color: #15BE50;
	}

	.c-primary {
		color: $uni-color-primary;
	}

	// backgroundColor bgc bgColor
	.bgc-fff,
	.bgc-ffffff,
	.bgColor-fff,
	.bgColor-ffffff {
		background-color: #FFFFFF;
	}

	.bgColor-f5f5f5,
	.bgc-f5f5f5 {
		background-color: #F5F5F5;
	}

	.bgc-000,
	.bgc-000000,
	.bgColor-000,
	.bgColor-000000 {
		background-color: #000000;
	}

	.bgc-eee,
	.bgc-eeeeee,
	.bgColor-eee,
	.bgColor-eeeeee {
		background-color: #EEEEEE;
	}

	.bgc-FF6B00,
	.bgColor-FF6B00 {
		background-color: #FF6B00;
	}

	.bgc-FF0000,
	.bgColor-FF0000 {
		background-color: #FF0000;
	}

	.bgc-61B665 {
		background-color: #61B665;
	}

	.bgc-FF6B00-_1,
	.bgColor-FF6B00_1 {
		background-color: rgba(255, 107, 0, 0.1);
	}

	.bgc-007AFF-_1,
	.bgColor-007AFF-_1 {
		background-color: rgba(0, 122, 255, 0.1);
	}

	.bgc-15BE50-_1,
	.bgColor-15BE50-_1 {
		background-color: rgba(21, 190, 80, 0.1);
	}


	// flex
	.flex_row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
	}

	.flex_column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
	}

	.flex_row_c_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.flex_column_c_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.flex_column_none_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		align-items: center !important;
		// justify-content: flex-start;
	}

	.flex_column_e_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	.flex_row_none_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: center !important;
		// justify-content: flex-start;
	}

	.flex_row_none_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: flex-end !important;
		// justify-content: flex-start;
	}

	.flex_row_none_s {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		align-items: flex-start !important;
		// justify-content: flex-start;
	}

	.flex_row_e_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-end !important;
		// align-items: flex-start;
	}

	.flex_row_c_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
	}

	.flex_row_between_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.flex_row_around_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-around !important;
		align-items: center !important;
	}

	.flex_row_s_s {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	.flex_column_between_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.flex_column_between_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		// align-items: flex-start;
	}

	.flex_column_around_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-around !important;
		// align-items: flex-start;
	}

	.flex_column_between_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: space-between !important;
		// align-items: flex-end;
	}

	.flex_column_e_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: flex-end !important;
		// align-items: flex-start;
	}

	.flex_column_c_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		justify-content: center !important;
		// align-items: flex-start;
	}

	.flex_column_none_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
		align-items: flex-end !important;
		// justify-content: flex-start;
	}

	.flex_row_e_c {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	.flex_row_c_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: center !important;
		align-items: flex-end !important;
	}

	.flex_row_between_e {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: flex-end !important;
	}

	.flex_row_between_none {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
		justify-content: space-between !important;
		// align-items: flex-start;
	}

	.flex_1 {
		flex: 1 !important;
	}

	// flex-wrap fw-w
	.fw-w {
		flex-wrap: wrap;
	}

	.video_header {
		position: fixed;
		display: flex;
		justify-content: space-between;
		left: 0;
		flex-direction: row;
		align-items: center;
	}

	.video_header_backBox {
		padding: 32upx 32upx;
	}

	.video_header_back {
		width: 18upx;

	}

	.video_header_right {
		margin-right: 24upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.video_header_right_detele {
		width: 72upx;
		height: 72upx;
		margin-right: 18upx;
	}

	.video_header_right_detele_img {
		width: 72upx;
		height: 72upx;
	}

	.video_header_right_share_img {
		width: 72upx;
		height: 72upx;
	}
</style>
